<template>
  <div class="qiniu2">
 	  <input @change="uploadInputchange"  ref="file" type="file" accept="image/*">

    <img :src="imgUrl"/>
    <!-- http://resource.caomudai.com/FumHpCSXc8M5UiKHlbwIDvSc_kWC -->
    <!-- <img src="http://resource.caomudai.com/FumHpCSXc8M5UiKHlbwIDvSc_kWC"/> -->

  </div>
</template>

<script type="text/ecmascript-6">
import api from "@/api/api";
import * as qiniu from "qiniu-js";

const URL = "http://resource.caomudai.com/";
export default {
  data() {
    return {
      token: null,
      targetName: 'girl',
      imgUrl: null
    };
  },
  created() {
    this._getUploadToken();
  },
  methods: {
    //触发input change事件
    uploadInputchange() {
      let file = this.$refs.file.files[0]; //选择的图片文件
      console.log(file.name);
      this.uploadImgToQiniu(file);
    },
    //上传图片到七牛
    uploadImgToQiniu(file) {
      /*
    * config.useCdnDomain: 是否使用 cdn 加速域名，true or false，默认为 false。
    * config.disableStatisticsReport: 是否禁用日志报告，为布尔值，默认为false。
    * config.region: 选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域
    * config.retryCount: 上传自动重试次数（整体重试次数）；默认3次（即上传失败后最多重试两次）；
    * config.concurrentRequestLimit: 分片上传的并发请求量，number，默认为3；
    * config.checkByMD5: 是否开启 MD5 校验，在断点续传时校验分片，默认为 false，不开启。
    */
      let config = {
        useCdnDomain: true,
        region: qiniu.region.z0 //华东
      };

      /*
      * fname: string，文件原文件名.
      * params: object，用来放置自定义变量;
      * mimeType: null || array，用来限制上传文件类型，为 null 时表示不对文件类型限制；
      * 限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
      */

      let putExtra = {
        fname: "",
        params: {},
        mimeType: ["image/png", "image/jpeg", "image/gif"] || null
      };

      let _this = this;
      let observer = {
        next(res) {
          console.log("已上传大小，单位为字节：" + res.total.loaded);
          console.log("本次上传的总量控制信息，单位为字节：" + res.total.size);
          console.log("当前上传进度，范围：0～100：" + res.total.percent);
        },
        error(err) {
          console.log(err.code);
          console.log(err.message);
          console.log(err.isRequestError);
          console.log(err.reqId);
        },
        complete(res) {
          //完成后的操作
          //上传成功以后会返回key 和 hash  key就是文件名了！
          console.log(res);
          _this.imgUrl = URL + res.key;
        }
      };


      //开始上传  token 需要找后端获取(单独的方法)
      // let observable = qiniu.upload(file, this.targetName, this.token, putExtra, config);
      let observable = qiniu.upload(file, null, this.token, putExtra, config);
      let subscription = observable.subscribe(observer); // 上传开始
    },
    _getUploadToken() {
      api.getUploadToken().then(response => {
        this.token = response;
        console.log(this.token);
      });
    },
     _getUploadToken2() {
      api.getUploadToken2(this.targetName).then(response => {
        this.token = response;
        console.log(this.token);
      });
    }
  }
};
</script>

<style lang="less">
.qiniu2 {
  img {
    width: 300px;
    height: 300px;
    border: 1px dashed #666;
  }
}
</style>